<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <style>
        header{
            background-image: url(./img/大咩2.png);
        }

        .archives{
            width: 100%;
            /* background-color: aquamarine; */
        }
        .archives .time {
            font-size: 22px;
            font-weight: bold;
            /* background-color: antiquewhite; */
            margin-top: 25px;
        }


        .archives-list {
            font-size: 18px;
            margin-top: 10px;
            margin-left: 50px;
            line-height: 32px;
        }

        .archives-list .item{
            display: block;
            width: 100%;
        }

        .archives-list .item:hover{
            background-color: rgba(109, 109, 109, 0.05);
        }

        @media (max-width:420px) {
            main {
                padding: 15px;
            }
        }

    </style>
    <title>档案记录</title>
</head>

<body>
    <header>
        <nav class="nav-top top-show">
            <div id="logo">
                <a href="./index.html">
                    暗天使
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="index.html" class="item">首页</a>
                <a href="./list.html" class="item">文章</a>
                <a href="./archives.html" class="item">足迹</a>
                <a href="./links.html" class="item">友链</a>
                <a href="about.html" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search.html">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div id="cd-top">
            <img src="./img/f.png" alt="">
        </div>
        <div class="container-flex">
            <div class="box">
                <div class="h1">档案记录</div>
            </div>
        </div>
    </header>

    <main class="container">
        <div class="archives">
            <div class="time">2021年 12月</div>
            <div class="archives-list">
                <a href="#" class="item">12-25 校运会</a>
            </div>
        </div>
        <div class="archives">
            <div class="time">2021年 11月</div>
            <div class="archives-list">
                <a href="#" class="item">11-11 四个一组成的节日，是中国空军成立是日子</a>
                <a href="#" class="item">11-22 34567894567890</a>
            </div>
        </div>
        <div class="archives">
            <div class="time">2021年 09月</div>
            <div class="archives-list">
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
                <a href="#" class="item">08-08 22222222222233333333333</a>
            </div>
        </div>

        <footer>
            footer Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, distinctio commodi?
            Voluptatem
            asperiores dicta, excepturi corporis r molestiae iste veniam tempore sint odio,
            <br>
            corrupti ipsa. Harum, inventore.
        </footer>
        
    </main>

    <script src="./js/main.js"></script>
</body>

</html>